<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wai-aria annotations tests</title>
    <style>
      html {
        font-family: sans-serif;
      }

      ins, [role="insertion"] {
        color: #0c0;
        text-decoration: underline;
      }

      del, [role="deletion"] {
        color: red;
        text-decoration: line-through;
      }

      ins, [role="insertion"], del, [role="deletion"] {
        text-decoration-thickness: 2px;
        background-color: #fee;
        padding: 2px 4px;
        margin: 0 1px;
      }

      [role="comment"] {
        padding: 5px 10px 10px 15px;
        background: #eee;
        border: 1px solid #ccc;
        width: 250px;
        margin-bottom: 10px;
      }

      [role="comment"] > [role="comment"] {
        width: 84%;
      }

      [data-author="chris"] {
        border-left: 7px solid red;
      }

      [data-author="marcus"] {
        border-left: 7px solid blue;
      }

      [role="comment"] .comment-text {
        line-height: 1.5;
        font-size: 0.9rem;
      }

      [role="comment"] h3 {
        font-size: 1.1rem;
      }

      [role="comment"] time {
        font-size: 0.8rem;
      }
    </style>
  </head>
  <body>
    <section>
      <h2>Basic description</h2>
      <div aria-description="Choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.">
        <p>Pick your favourite fruit:</p>
        <form>
          <ul>
            <li><label>Apple: <input type="radio" name="fruit" value="apple"></label></li>
            <li><label>Orange: <input type="radio" name="fruit" value="orange"></label></li>
            <li><label>Banana: <input type="radio" name="fruit" value="banana"></label></li>
          </ul>
        </form>
      </div>
    </section>
    <section>
      <h2>Suggestions</h2>

      <p>Freida’s pet is a <del>black Cat called Luna</del><ins>purple Tyrannosaurus Rex called Tiny</ins>.</p>

      <p>Freida’s pet is a <span role="deletion">black Cat called Luna</span><span role="insertion">purple Tyrannosaurus Rex called Tiny</span>.</p>

      <p>Freida’s pet is a
        <span role="suggestion"><span role="deletion">black Cat called Luna</span><span role="insertion">purple Tyrannosaurus Rex called Tiny</span></span>.
      </p>
    </section>
    <section>
      <h2>Comments</h2>

      <p>The last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-1 thread-2">end of the guitar solo</mark>, before fading away sharply.</p>

      <div role="comment" id="thread-1" data-author="chris">
        <h3>Chris said</h3>
        <p class="comment-text">I really think this moment could use more cowbell.</p>
        <p><time datetime="2019-03-30T19:29">March 30 2019, 19:29</time></p>
      </div>

      <div role="comment" id="thread-2" data-author="marcus">
        <h3>Marcus said</h3>
        <p class="comment-text">The guitar solo could do with a touch more chorus, and a slightly lower volume.</p>
        <p><time datetime="2019-03-29T15:35">March 29 2019, 15:35</time></p>
      </div>

      <p>The last half of the song is a slow-rising crescendo that peaks at the <mark aria-details="thread-3">end of the guitar solo</mark>, before fading away sharply.</p>

      <div role="comment" id="thread-1" data-author="chris">
        <h3>Chris said</h3>
        <p class="comment-text">I really think this moment could use more cowbell.</p>
        <p><time datetime="2019-03-30T19:29">March 30 2019, 19:29</time></p>

        <div role="comment" data-author="marcus">
          <h3>Marcus replied</h3>
          <p class="comment-text">I don't know about that. I think the cowbell could distract  from the solo.</p>
          <p><time datetime="2019-03-30T21:02">March 30 2019, 21:02</time></p>
        </div>
      </div>
    </section>

  </body>
</html>
